<template>
    <div class="cartcontrol">
        <!--  过度动画 -->
        <transition name="move">
            <!--  水平移动过度 -->
            <div class="cart-decrease" v-show="food.countImmediately>0" @click.stop="decrease">
                <!--  翻转过度 -->
                <span class="inner icon-remove_circle_outline"></span>
            </div>
        </transition>
        <div class="cart-count" v-show="food.countImmediately>0">{{food.countImmediately}}</div>
        <div class="cart-add icon-add_circle" @click.stop="add"></div>
    </div>
</template>

<script>
    // 加按钮点击事件
    const EVENT_ADD = 'add'
    // countLate延迟时间
    const COUNT_LATE_TIME = 500

    export default {
        name: 'cart-control',
        props: {
            // 控键控制的商品
            food: {
                type: Object
            }
        },
        methods: {
            // 加商品
            add(event) {
                // 触发添加事件，为购物车小球提供el位置
                this.$emit(EVENT_ADD, event.target)

                /* 使用两份count，countImmediately的添加实时更新 */
                if (!this.food.countImmediately) {
                    // 调用set方法使得为对象新增属性成为响应式
                    this.$set(this.food, 'countImmediately', 1)
                } else {
                    this.food.countImmediately++
                }

                let _this = this
                // 保证count在购物车小球下落后才得到更新
                setTimeout(() => {
                    if (!_this.food.count) {
                        _this.$set(_this.food, 'count', 1)
                    } else {
                        _this.food.count++
                    }
                }, COUNT_LATE_TIME)
            },
            // 减商品
            decrease() {
                if (this.food.count > 0) {
                    this.food.countImmediately--
                    this.food.count--
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import "~common/stylus/variable"

    .cartcontrol
        display: flex
        align-items: center
        // 减少按钮 为实现左移与旋转 套接一层div
        .cart-decrease
            display: inline-block
            padding: 6px
            opacity: 1
            .inner
                display: inline-block
                line-height: 24px
                font-size: $fontsize-large-xxx
                color: $color-blue
                transition: all 0.4s linear
                transform: rotate(0)
            // 动画过程
            &.move-enter-active, &.move-leave-active
                transition: all 0.4s linear
            &.move-enter, &.move-leave-active
                opacity: 0
                transform: translate3d(24px, 0, 0)
                .inner
                    transform: rotate(180deg)
        //  购买数量
        .cart-count
            width: 12px
            line-height: 24px
            text-align: center
            font-size: $fontsize-small-s
            color: $color-grey
        // 添加按钮
        .cart-add
            display: inline-block
            padding: 6px
            line-height: 24px
            font-size: $fontsize-large-xxx
            color: $color-blue
</style>
